<template>
  <div class="vm">
    <!-- <h2 class="h-title">聚合数据</h2> -->
    <div
      id="map"
      class="map-x"
    ></div>
  </div>
</template>
<script>
import "ol/ol.css";
import { Map, View } from "ol";
import { Tile as TileLayer } from "ol/layer";
// import OSM from 'ol/source/OSM'
import XYZ from "ol/source/XYZ";
import { Style, Circle, Stroke, Fill, Text } from "ol/style";
import layerVector from "ol/layer/Vector";
import sourceVector from "ol/source/Vector";
import Cluster from "ol/source/Cluster";
import Point from "ol/geom/Point";
import Feature from "ol/Feature";
import gisApi from "../../gisApi";
// import { fromLonLat } from "ol/proj";
export default {
  name: "Polymerization",
  data() {
    return {
      map: null,
      clusterData: [
        { coordinate: [12731221.428514445, 3568153.2149517313] },
        { coordinate: [12731315.541590942, 3568148.915379825] },
        { coordinate: [12731129.644356782, 3568110.338526109] },
        { coordinate: [12731668.525442641, 3568112.249495554] },
        { coordinate: [12731293.02851203, 3567904.9140308164] },
        { coordinate: [12731669.480890915, 3567860.0073058573] },
        { coordinate: [12732024.913043283, 3568215.439476449] },
        { coordinate: [12732227.47113908, 3567806.5013641887] },
        { coordinate: [12731679.990982305, 3567691.845821761] },
        { coordinate: [12732775.488845764, 3567247.9139043577] },
        { coordinate: [12732975.658320876, 3567227.3714566506] },
        { coordinate: [12732775.011121627, 3567158.5781239043] },
        { coordinate: [12733143.819768524, 3567190.5860966956] },
        { coordinate: [12732162.559414268, 3567038.6675357823] },
        { coordinate: [12732423.400769647, 3566908.7246022765] },
        { coordinate: [12732325.943573164, 3566719.0652221986] },
        { coordinate: [12732244.251506474, 3566551.859208246] },
        { coordinate: [12732047.426158642, 3566431.9486347027] },
        { coordinate: [12732583.918529045, 3565387.1499952185] },
        { coordinate: [12732543.311372349, 3565112.4544193507] },
        { coordinate: [12732938.395255009, 3565073.758144623] },
        { coordinate: [12731522.55191893, 3568104.416686044] },
        { coordinate: [12731600.315983005, 3568100.435587784] },
        { coordinate: [12731511.404858379, 3568105.743721835] },
        { coordinate: [12731628.714454165, 3568102.558839582] },
        { coordinate: [12731542.988211792, 3568105.4783073873] },
        { coordinate: [12731645.435054103, 3568107.3361538495] },
      ],
    };
  },
  methods: {
    setSize(num) {
      return num + 10;
    },
    initMap() {
      var features = [];
      this.clusterData.forEach((item) => {
        features.push(new Feature(new Point(item.coordinate)));
      });
      // 把点状要素放到矢量源里
      let source = new sourceVector({
        features,
      });
      let clusterSource = new Cluster({
        // 通过 distance 来控制两个点聚合的间距，如果2个点的间距小于 distance 所设置的数时，就会以聚合的方式显示
        distance: 40,//两点之间的最小距离（像素）
        source, // 就是前面用到的矢量数据源
      });
      // 点的样式
      let styleCache = {};
      let clusters = new layerVector({
        source: clusterSource, // 源，指向上面的聚合数据源
        style: (feature) => {
          // feature 是聚合后的数据，每一个 feature 代表距离小于上面设置的点状要素
          let size = feature.get("features").length; // 一个要素组的要素数量
          let style = styleCache[size];
          if (!style) {
            style = new Style({
              image: new Circle({
                radius: this.setSize(size),
                stroke: new Stroke({
                  color: "#fff",
                }),
                fill: new Fill({
                  color: "#3399cc",
                }),
              }),
              text: new Text({
                text: size.toString(), // 以聚合点的数量作为显示的内容
                fill: new Fill({
                  color: "#fff",
                }),
              }),
            });
            styleCache[size] = style;
          }
          return style;
        },
      });

      // 声明底图
      this.map = new Map({
        target: document.getElementById("map"),
        layers: [
          new TileLayer({
            source: new XYZ({ url: gisApi.layerConfig.tileUrl }),
          }),
          clusters,
        ],
        view: new View({
          center: gisApi.mapConfig.center,
          minZoom: 1,
          maxZoom: 19,
          zoom: 10,
          projection: "EPSG:3857",
          extent: gisApi.mapConfig.extent,
        }),
      });
    },
  },
  mounted() {
    this.initMap();
  },
};
</script>

<style>
.vm {
  width: 100%;
  height: 100%;
}
.map-x {
  width: 100%;
  height: 100%;
}
</style>
